<template>
	<view>
		<mysearch @myclick='gotosearch'></mysearch>
		<!-- <mysearch :bgcolor="pink" :radius="20"></mysearch> -->
		<view class="scroll-container">
			<scroll-view scroll-y="true" :style="{height: wh+'px'}" class="left-scroll">
				<view class="left-scroll-item active">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
				<view class="left-scroll-item">xxxxxxx</view>
			</scroll-view>
			<scroll-view scroll-y="true" :style="{height: wh+'px'}">
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
				<view>yyyyy</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				wh: 0,
			};
		},
		onLoad() {
			const systemHeight = uni.getSystemInfoSync()
			this.wh = systemHeight.windowHeight - 50;
		},
		methods:{
			gotosearch(){
		uni.navigateTo({
			url:'/subpkg/search/search'
		})
			}
		}
	}
</script>

<style lang="scss">
	.scroll-container {
		display: flex;

		.left-scroll {
			width: 120px;

			.left-scroll-item {
				line-height: 60px;
				background-color: #f7f7f7;
				text-align: center;
				font-size: 14px;

				&.active {
					background-color: #fff;
					position: relative;

					&::before {
						content: '';
						display: block;
						height: 30px;
						width: 3px;
						position: absolute;
						top: 50%;
						left: 0;
						color: #500000;
						transform: translateY(-50%);

					}

				}
			}
		}
	}
</style>